<template>
	<div style="width: 100% ; min-height: 100%;">
		<!-- 头像显示以及个人名字 -->
		<view class="view-top">
			<view class="view-top-title">
				<!-- 头像 -->
				<view class="topinfo-avatarWrap"><image class="topinfo-titleImage" :src="info.title" @tap="goMyInfoPage"></image></view>
				<!-- 昵称和备注 -->
				<view class="view-top-realName">
					<view class="topinfo-wxName">
						昵称：
						<span>{{ info.realName }}</span>
						<image class="topinfo-gender" :src="info.sexUrl"></image>
					</view>
					<view class="topinfo-otherInfo">
						<div>
							备注：
							<text>{{ info.integral }} | 入行{{ info.lengthOfService || 0 }}年</text>
						</div>
						<van-icon name="qr" size="20" @tap="goQrCodePage" />
					</view>
				</view>
			</view>
		</view>

		<!--    显示一些统计信息-->
		<view class="counter-container">
			<view class="counter-item">
				<view class="counter-itemTitle">参与项目数</view>
				<view class="counter-itemNumber">{{ userInfo.project1 }}</view>
			</view>

			<view class="counter-item">
				<view class="counter-itemTitle">工作年龄</view>
				<view class="counter-itemNumber">{{ userInfo.project2 }}</view>
			</view>

			<view class="counter-item">
				<view class="counter-itemTitle">设备数</view>
				<view class="counter-itemNumber">{{ userInfo.project3 }}</view>
			</view>

			<view class="counter-item">
				<view class="counter-itemTitle">年龄</view>
				<view class="counter-itemNumber">{{ userInfo.project4 }}</view>
			</view>
		</view>
		
		<view style="margin-top: 20rpx;">
			<van-cell title="获取权限" is-link />
			<van-cell title="计算器" :border="false" is-link link-type="navigateTo" url="/pages/myPage/child/counter" />
		</view>

		
		
		<!-- 弹框 -->
		<uni-popup ref="popup" type="dialog"><uni-popup-dialog content="您是否要退出" @confirm="confirm"></uni-popup-dialog></uni-popup>
		<uni-popup ref="popupMessage" type="message"><uni-popup-message type="success" message="退出成功" :duration="2000"></uni-popup-message></uni-popup>
		<!-- 加载中 -->
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/myPage/title.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</div>
</template>

<script>
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';

export default {
	name: 'myPage',
	components: {
		uniPopupDialog,
		uniPopupMessage
	},
	data() {
		return {
			info: {
				title: require('../../static/myPage/title.jpg'),
				sexUrl: 0 ? require('../../static/myPage/male.png') : require('../../static/myPage/female.png'),
				realName: 'uniapp',
				integral: 'uniapp-practice',
				lengthOfService: 2
			},
			userInfo: {
				project1: 6,
				project2: 2,
				project3: 1,
				project4: 22
			},

			loadModal: false,
			message: '消息！'
		};
	},

	methods: {
		/**
		 * 打开退出账号的弹框
		 */
		dialogOpen() {
			this.$refs.popup.open();
		},
		/**
		 * 点击确认按钮触发
		 * @param {Object} done
		 * @param {Object} value
		 */
		confirm(done, value) {
			// 输入框的值
			this.$refs.popupMessage.open();
			console.log(value);
			// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
			done();
		},
		// 页面跳转@tap方法
		goIndexPage(e) {
			this.loadModal = true;
			setTimeout(() => {
				this.loadModal = false;
				uni.navigateTo({
					url: '/pages/myPageDetail/myPageDetail'
				});
			}, 500);
		},
		/**
		 * @author: @xusy
		 * @date: 2020/12/27 20:26
		 * @creed: 计算器页面
		 */
		goCounterPage() {
			uni.navigateTo({
				url: '/pages/myPage/child/counter'
			});
		}
	}
};
</script>

<style scoped lang="scss">
// 最上方个人信息的缩略版样式
/* 最上方个人信息的缩略版样式 */
.view-top {
	width: 100%;
	height: 200rpx;
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eeeeee;
	.view-top-title {
		display: flex;
		.topinfo-avatarWrap {
			margin-left: 60rpx;
			.topinfo-titleImage {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
		}
		.view-top-realName {
			margin-left: 40rpx;
			padding: 10rpx 0;
			width: 480rpx;
			.topinfo-wxName {
				font-size: 28rpx;
				color: #666;
				.topinfo-gender {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
			.topinfo-otherInfo {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
}

/* 统计的信息的显示 */
.counter-container {
	background: #fff;
	width: 100%;
	padding: 25rpx 0;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	.counter-item {
		flex-shrink: 1;
		.counter-itemTitle {
			font-size: 22rpx;
			color: #999;
			text-align: center;
		}
		.counter-itemNumber {
			font-size: 36rpx;
			color: #ff7a22;
			font-weight: bold;
			text-align: center;
			line-height: 66rpx;
		}
	}
}

</style>
